<template>
  <div class="page-wrapper">
    <c-card title="流程列表" class="user-list">
      <el-button slot="func" size="small" type="primary" class="item" @click="showAddDlg">添加</el-button>
      <template v-loading="loading">
        <div class="search-row">
          <c-search
            v-model="searchText"
            :height="30"
            :width="200"
            placeholder="名称搜索"
            class="item"
            @submit="_getWorkorders"
          />
        </div>
        <el-table ref="table" :data="workorderList" stripe style="width: 100%;">
          <el-table-column prop="processCode" label="流程编码" show-overflow-tooltip></el-table-column>
          <el-table-column prop="processName" label="流程名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="priorityId" label="优先级" show-overflow-tooltip>
            <template v-slot="{row}">
              <div>{{ row.priorityId && priorityList[4 - row.priorityId] }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="version" label="版本号" show-overflow-tooltip></el-table-column>
          <el-table-column label="状态">
            <template v-slot="{ row }">{{ row.status === 1 ? '发布' : '下架' }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row, $index}">
              <el-button size="small" type="text" @click="showEditDlg(row, $index)">修改</el-button>
              <el-button
                size="small"
                type="text"
                @click="$router.push(`/process/${row.pkid}/node`)"
              >设置节点</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :current-page.sync="page.index"
            :total="page.total"
            @current-change="_getWorkorders"
          ></el-pagination>
        </div>
      </template>
    </c-card>
    <c-dlg :title="(workorder.pkid ? '编辑' : '添加') + '流程'" :visible.sync="dialogVisible">
      <el-form
        ref="form"
        :rules="rules"
        :model="workorder"
        label-width="60px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="流程编号" prop="processCode">
              <el-input v-model="workorder.processCode" size="small"></el-input>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="流程名称" prop="processName">
              <el-input v-model="workorder.processName" size="small"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="优先级" prop="priorityId">
              <el-select v-model="workorder.priorityId" size="small">
                <el-option v-for="(p, i) in priorityList" :key="i" :value="4-i" :label="p"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="状态" prop="gender">
              <el-radio-group v-model="workorder.status">
                <el-radio :label="0">下架</el-radio>
                <el-radio :label="1">发布</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="danger" size="small" @click="submitForm">提交</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </div>
    </c-dlg>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import CSearch from "@/components/CSearch";
import CDlg from "@/components/CDlg";
import { clone } from "lodash";
import { calcPageNum } from "@/utils";
export default {
  name: "Processes",
  components: {
    CCard,
    CSearch,
    CDlg
  },
  data() {
    return {
      loading: false,
      searchText: "",
      workorderList: [],
      dialogVisible: false,
      workorder: { status: 0 },
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      rules: {
        processCode: [
          { required: true, message: "请输入流程编号", trigger: "blur" }
        ],
        processName: [
          { required: true, message: "请输入流程名称", trigger: "blur" }
        ],
        priorityId: [
          { required: true, message: "请输入流程优先级", trigger: "blur" }
        ]
      },
      priorityList: ["高", "中", "低", "一般"]
    };
  },
  watch: {
    "page.index"(v) {
      const path = this.$route.path;
      this.$router.push(path + "?page=" + v);
    }
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);

    const page = parseInt(this.$route.query.page || 1);
    this.$set(this.page, "index", page);
    this._getWorkorders();
  },
  methods: {
    // 获取流程列表
    _getWorkorders() {
      const params = {
        page: this.page.index,
        rows: this.page.size,
        processName: this.searchText || ""
      };
      this.loading = true;
      // 获取流程列表 api
      return this.$axios
        .get("plat/work/queryProcess", { params })
        .then(res => {
          if (res.code === 1) {
            this.workorderList = res.data.rows;
            this.$set(this.page, "total", res.data.total);
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e))
        .finally(() => {
          this.loading = false;
        });
    },
    showAddDlg() {
      // if (this.workorder.pkid) {
      //   this.workorder = {};
      // }
      if (!this.workorder.isNew) {
        this.workorder = { status: 0, isNew: true };
      }
      this.dialogVisible = true;
    },
    showEditDlg(wo, index) {
      if (this.curWorkorderId !== wo.pkid) {
        this.workorder = clone(wo);
      }
      this.curIndex = index;
      this.dialogVisible = true;
    },
    changeStatus(wo) {
      if (!wo.status) {
        this.$set(wo, "status", 1);
      } else {
        this.$set(wo, "status", 0);
      }
    },
    // 提交添加流程
    submitForm() {
      this.$axios
        .post("plat/work/editProcess", this.workorder)
        .then(res => {
          if (res.code === 1) {
            this.dialogVisible = false;
            if (!this.workorder.pkid) {
              // 添加
              this.workorderList.push(res.data);
            } else {
              // 编辑
              this.$set(this.workorderList, this.curIndex, res.data);
            }
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
